<template>
  <div class="app">
    <h1>vuex案例</h1>
    <div>总资产：{{ $store.state.money }}</div>
    <div>车：{{ $store.state.car }}</div>
    <Man class="man"></Man>
    <Women class="women"></Women>
    <Three class="three"></Three>
  </div>
</template>

<script>
import Man from "./components/Man";
import Women from "./components/Women";
import Three from "./components/Three";
export default {
  components: {
    Man,
    Women,
    Three,
  },
  created() {
    console.log(this.$store.state.money);
  },
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
.app {
  text-align: center;
  width: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink;
  .man,
  .women,
  .three {
    height: 200px;
    border-bottom: 3px solid #ccc;
    background-color: #ddd;
  }
  div {
    min-height: 30px;
  }
}
</style>
